<!--
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-12-14 17:17:01
 * @FilePath: \penk-ui\src\components\PenkFooter.vue
 * @email: 492934056@qq.com
-->
<!--
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-12-13 16:28:34
 * @FilePath: \front-master\src\components\public\PenkFooter.vue
 * @email: 492934056@qq.com
-->
<template>
  <div class="penk-footer">
    <el-pagination
      :total="total"
      v-model:current-page="paginationData.pageNum"
      v-model:page-size="paginationData.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 30, 50, 100]"
      background
      layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";

// 暴露props
interface props {
  // 总条目数
  total: number;
  // 当前页
  pageNum: number;
  // 页数
  pageSize: number;
}
const props = defineProps<props>();

let paginationData = reactive({
  pageNum: props.pageNum,
  pageSize: props.pageSize,
});

// 生成事件对象，数组中就是对象名
const emit = defineEmits(["change", "update:pageSize", "update:pageNum"]);
// 事件，如果用v-model 其实不是很需要这数据...
function handleSizeChange(e: number) {
  emit("update:pageSize", e);
  emit("change", paginationData);
}
function handleCurrentChange(e: number) {
  emit("update:pageNum", e);
  emit("change", paginationData);
}
</script>


<script lang="ts">
export default {
  name: "PenkFooter",
};
</script>

<style lang="less" scoped>
.penk-footer {
  margin-top: 20px;
  float: right;
}
</style>
